<template>
  <div>
    <div>
      <el-select size="mini" v-model="robotId" @change="chooseDevice" filterable placeholder="请选择控制设备">
        <el-option v-for="item in robotList" :key="item.id" :label="item.device_name" :value="item.id"> </el-option>
      </el-select>
      <el-button type="primary" size="mini" round>刷新设备列表</el-button>
    </div>
    <div class="flex-container">
      <label>是否启用避障 </label>
      <el-switch v-model="enableObstacleAvoidance" active-color="#13ce66" inactive-color="#aaaaaa" @change="fuc_obstacle_ignore"> </el-switch>
    </div>
    <div class="flex-container">
      <label>是否启用键盘控制 </label>
      <el-switch v-model="enableKeyBoard" active-color="#13ce66" inactive-color="#aaaaaa"> </el-switch>
    </div>
    <div class="flex-container">
      <label>松开按键停止运动 </label>
      <el-switch v-model="enableKeyUpStop" active-color="#13ce66" inactive-color="#aaaaaa"> </el-switch>
    </div>
    <div>
      <label style="font-size: 15px">线速度：</label>
      <el-input-number
        class="input_control"
        v-model="lineSpeed"
        controls-position="right"
        size="mini"
        :min="-1.8"
        :max="1.8"
        :precision="2"
        :step="0.1"
      ></el-input-number>
      <label style="font-size: 15px">角速度：</label>
      <el-input-number
        class="input_control"
        style="color: #282d3a"
        v-model="rateSpeed"
        controls-position="right"
        size="mini"
        :min="-1.8"
        :max="1.8"
        :precision="2"
        :step="0.1"
      ></el-input-number>
    </div>
    <div class="btn_control_div">
      <el-button class="btn_control" type="primary" size="mini" @click="cmd_forward">前进</el-button>
    </div>
    <div class="btn_control_div">
      <el-button class="btn_control" type="primary" size="mini" @click="cmd_turnLeft">左转</el-button>
      <el-button class="btn_control" type="primary" size="mini" @click="cmd_stop">停止</el-button>
      <el-button class="btn_control" type="primary" size="mini" @click="cmd_turnRight">右转</el-button>
    </div>
    <div class="btn_control_div">
      <el-button class="btn_control" type="primary" size="mini" @click="cmd_backward">后退</el-button>
    </div>
    <div></div>
  </div>
</template>

<script>
// import LogWindow from "../../components/LogPg.vue";
export default {
  components: {
    // LogWindow,
  },
  data() {
    return {
      robotList: [],
      robotId: "",
      lineSpeed: 0.3,
      rateSpeed: 0.3,
      keyState: { w: false, a: false, s: false, d: false, space: false },
      enableObstacleAvoidance: false,
      enableKeyBoard: false,
      enableKeyUpStop: true,
    };
  },
  created() {
    this.getOnlineRobotsList();
    this.$store.state.showDetails = true;
    this.$emit("update:data", { show_details: true });
  },
  computed: {
    // count() {
    //   return this.$store.state.msg_error;
    // },
  },
  mounted() {
    document.addEventListener("keydown", this.handleKeyDown);
    document.addEventListener("keyup", this.handleKeyUp);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.handleKeyDown);
    document.removeEventListener("keyup", this.handleKeyUp);
  },
  watch: {
    "$store.state.msg_error"(newValue, oldValue) {
      if (newValue !== "") {
        this.$message.error(newValue);
        this.$store.state.msg_error = "";
      }
    },
  },
  methods: {
    fuc_obstacle_ignore() {
      console.log(this.enableObstacleAvoidance);
      if (!this.$store.state.status_deviceSelect) {
        this.enableObstacleAvoidance = !this.enableObstacleAvoidance;
        this.$message.error("请先选择设备");
        return;
      }
      this.$store.dispatch("sendMessage", {
        msgType: "msgType_Cmd",
        content: "obstacle_ignore",
        enable: this.enableObstacleAvoidance,
      });
    },
    handleKeyDown(event) {
      if (!this.enableKeyBoard) return;
      if (event.key === " ") {
        if (this.keyState.space) return;
        this.keyState.space = true;
        this.cmd_stop();
        return;
      }
      const lowerCaseVar = event.key.toLowerCase();
      if (this.keyState[lowerCaseVar]) return;
      this.keyState[lowerCaseVar] = true;
      switch (lowerCaseVar) {
        case "w":
          this.cmd_forward();
          break;
        case "a":
          this.cmd_turnLeft();
          break;
        case "s":
          this.cmd_backward();
          break;
        case "d":
          this.cmd_turnRight();
          break;
      }
    },
    handleKeyUp(event) {
      if (!this.enableKeyBoard) return;
      if (event.key === " ") {
        this.keyState.space = false;
        return;
      }
      const lowerCaseVar = event.key.toLowerCase();
      this.keyState[lowerCaseVar] = false;
      if (this.enableKeyUpStop) {
        if (lowerCaseVar === "w" || lowerCaseVar === "s" || lowerCaseVar === "a" || lowerCaseVar === "d") this.cmd_stop();
      }
    },
    async getOnlineRobotsList() {
      const { data: res } = await this.$http.get("getOnlineRobots");
      if (res.meta.status !== 200) {
        return this.$message.error("获取在线设备失败！");
      }
      this.robotList = res.data.robots;
      //   console.log(this.robotList);
    },
    chooseDevice() {
      console.log(this.robotId);
      this.$store.state.status_deviceSelect = this.robotId;
      this.$store.dispatch("sendMessage", {
        msgType: "msgType_ChooseDevice",
        content: this.robotId,
      });
    },
    cmd_forward() {
      this.$store.dispatch("sendMessage", {
        msgType: "msgType_Cmd",
        content: "forward",
        lineSpeed: this.lineSpeed,
      });
    },
    cmd_backward() {
      this.$store.dispatch("sendMessage", {
        msgType: "msgType_Cmd",
        content: "backward",
        lineSpeed: this.lineSpeed,
      });
    },
    cmd_turnLeft() {
      this.$store.dispatch("sendMessage", {
        msgType: "msgType_Cmd",
        content: "turnLeft",
        rateSpeed: this.rateSpeed,
      });
    },
    cmd_turnRight() {
      this.$store.dispatch("sendMessage", {
        msgType: "msgType_Cmd",
        content: "turnRight",
        rateSpeed: this.rateSpeed,
      });
    },
    cmd_stop() {
      this.$store.dispatch("sendMessage", {
        msgType: "msgType_Cmd",
        content: "stop",
      });
    },
  },
};
</script>

<!-- 支持less语法格式，scoped代表样式只在本组件起作用 -->
<style lang="less" scoped>
.el-card {
  margin-top: 7px;
  margin-right: 15px;
}
// .el-button {
//   size: mini;
// }
.flex-container {
  display: flex;
  align-items: center; /* 在交叉轴上居中对齐子项 */
  // justify-content: center; /* 可选，在主轴上居中对齐子项 */
  // height: 100px; /* 或你需要的任何高度 */
}
.btn_control {
  margin: 5px;
}
.input_control {
  margin: 15px;
}
.el-select {
  margin-right: 15px;
}
.btn_control_div {
  display: flex; //设置显示为flex布局
  justify-content: center;
}
// .flex-container {
//   display: flex;
//   justify-content: space-between; /* 使得子元素两端对齐，中间留有空隙 */
//   width: 100%; /* 确保容器宽度占满整个父容器或屏幕宽度 */
// }
</style>